<template>

  <div class="sele">
    <!-- 头部 -->
        <div class="header">
            <div class="backs" @click="$router.go(-1)">
                <svg t="1667890894489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17226" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="17227"></path></svg>
            </div>
            <p>分类</p>
            
        </div>
    <!-- 类别 -->
        <div class="leibie">
            <div :class="['item','no1',cc==1?'con':'']" @click="no1">全部</div>
            <div :class="['item','no1',cc==2?'con':'']" @click="no2">系统</div>
            <div :class="['item','no1',cc==3?'con':'']" @click="no3">玄幻</div>
            <div :class="['item','no1',cc==4?'con':'']" @click="no4">异能</div>
            <div :class="['item','no1',cc==5?'con':'']" @click="no5">末世</div>
            <div :class="['item','no1',cc==6?'con':'']" @click="no6">剧情</div>
            <div :class="['item','no1',cc==7?'con':'']" @click="no7">冒险</div>
            <div :class="['item','no1',cc==8?'con':'']" @click="no8">恋爱</div>
            <div :class="['item','no1',cc==9?'con':'']" @click="no9">悬疑</div>
            <div :class="['item','no1',cc==10?'con':'']" @click="no10">重生</div>
            <div :class="['item','no1',cc==11?'con':'']" @click="no11">搞笑</div>
            <div :class="['item','no1',cc==12?'con':'']" @click="no12">游戏</div>
            <div :class="['item','no1',cc==13?'con':'']" @click="no13">总裁</div>
            <div :class="['item','no1',cc==14?'con':'']" @click="no14">古风</div>
            <div :class="['item','no1',cc==15?'con':'']" @click="no15">青春</div>
            <div :class="['item','no1',cc==16?'con':'']" @click="no16">动作</div>
            <div :class="['item','no1',cc==17?'con':'']" @click="no17">科幻</div>
            <div :class="['item','no1',cc==18?'con':'']" @click="no18">武侠</div>
            <div :class="['item','no1',cc==19?'con':'']" @click="no19">穿越</div>
            <div :class="['item','no1',cc==20?'con':'']" @click="no20">大女主</div>
            <div :class="['item','no1',cc==21?'con':'']" @click="no21">百合</div>
            <div :class="['item','no1',cc==22?'con':'']" @click="no22">都市</div>
        </div>

        <!-- 漫画 -->
        <div class="they">
        <div class="item" v-for="(item,index) in bianli" :key="index">
            <div class="imgs">
                <img :src="item.imgs" alt="">
                <div class="bq">
                    {{item.all}}
                </div>
            </div>
            <div class="name">{{item.name}}</div>
            <div class="howmany">{{item.people}}</div>
        </div>
        
        </div>


  </div>
</template>

<script>
import { getseleData } from "../api/sele"
export default {
    data(){
        return{
            cc:1,
            bianli:[],
            selelists:[],
            selelists2:[],
            selelists3:[],
            selelists4:[],
            selelists5:[],
            selelists6:[],
            selelists7:[],
            selelists8:[],
            selelists9:[],
            selelists10:[],
        }
    },
    methods:{
        no1(){
            this.cc = 1
            this.bianli = this.selelists
        },
        no2(){
            this.cc = 2
            this.bianli2 = this.selelists2
        },
        no3(){
            this.cc = 3
            this.bianli = this.selelists3
        },
        no4(){
            this.cc = 4
            this.bianli = this.selelists4
        },
        no5(){
            this.cc = 5
            this.bianli = this.selelists5
        },
        no6(){
            this.cc = 6
            this.bianli = this.selelists6
        },
        no7(){
            this.cc = 7
            this.bianli = this.selelists7
        },
        no8(){
            this.cc = 8
            this.bianli = this.selelists8
        },
        no9(){
            this.cc = 9
            this.bianli = this.selelists9
        },
        no10(){
            this.cc = 10
            this.bianli = this.selelists10
        },
        no11(){
            this.cc = 11
        },
        no12(){
            this.cc = 12
        },
        no13(){
            this.cc = 13
        },
        no14(){
            this.cc = 14
        },
        no15(){
            this.cc = 15
        },
        no16(){
            this.cc = 16
        },
        no17(){
            this.cc = 17
        },
        no18(){
            this.cc = 18
        },
        no19(){
            this.cc = 19
        },
        no20(){
            this.cc = 20
        },
        no21(){
            this.cc = 21
        },
        no22(){
            this.cc = 22
        }
    },
    created(){
        getseleData().then((data)=>{
            console.log(data)
            this.selelists = data.selelists
            this.selelists2=data.selelists2
            this.selelists3=data.selelists3
            this.selelists4=data.selelists4
            this.selelists5=data.selelists5
            this.selelists6=data.selelists6
            this.selelists7=data.selelists7
            this.selelists8=data.selelists8
            this.selelists9=data.selelists9
            this.selelists10=data.selelists10
            this.bianli = this.selelists
            console.log(this.bianli)
        })
    }
}
</script>

<style lang="scss">
.sele .they{
    width: 99%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 1%;
    .item{
        width: 33%;
        padding: 5px;
        box-sizing: border-box;
        .name{
            font-size: 14px;
            color: #000;
        }
        .howmany{
            font-size: 12px;
            color: #999;
        }
        .imgs{
            width: 100%;
            position: relative;
            .bq{
                position: absolute;
                bottom: 5px;
                right: 5px;
                color:#fff;
                font-size: 12px;
            }
            img{
                width: 100%;
                display: block;
            }
        }
    }
}
.sele .header{
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: 20px;
    .backs{
        margin-left: 10px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        svg{
            width: 20px;
            height: 20px;
        }
    }
    p{
        margin-left: 150px;
    }
}
.sele .leibie{
    width: 90%;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    // border-bottom: 1px solid #999;
    .item{
        margin: 0 10px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color:#999;
        width: cale(100%/7);
        &.con{
            color: #000;
        }
    }
}

</style>